<template>
	<view class="window-top">
		<view class="window-flex">
			<view class="window-box">
				<scroll-view class="window-scroll" :scroll-y="false">
					<view class="dailyHeadBatten" style="height: 100%; display: flex;flex-direction: column;">

						<!-- 标题 -->
						<view class="tn-gradient-bg__cool-16 tn-bg-image top-font-title"
							style="color: #fff;font-size: xx-large;display: flex;flex-direction: column;align-items: center;padding: 30px 0;gap: 10px;font-weight: bold;">
							<!-- 顶部占位 -->
							<view :style="'height:'+sConf.tH+'px;'"> </view>
							<view class=""> 每日签到 </view>
							<view class=""> 好礼送不断 </view>
						</view>
						<!-- 日历 
						修改源文件: uni_modules\tuniaoui-vue3\theme-chalk\src\calendar.scss 
						background-color: #fef8e8;
						color: #C7A98B;
						修改源文件: uni_modules\tuniaoui-vue3\components\calendar\src\calendar.vue
						移除: @tap.stop="dateItemClickEvent(dateItem)"
						-->
						<view class="tn-gradient-bg__cool-16" style="padding: 60px 20px 20px 20px;position: relative;">
							<view style="border-radius: 10px;background-color: #FC8B3D;padding: 10px;">
								<tn-calendar v-if="curData !== null" v-model="curData" mode="multi" :show-lunar="true"
									:allow-change-year="false" :allow-change-month="false" active-bg-color="#dd524d88"
									active-text-color="#dd524d" :min-date="minDate"
									@change="calendarChange"></tn-calendar>
								<view
									style="display: flex;justify-content: space-between;align-items: center;padding: 20px 0;">
									<view style="color: #FFF3C8;">您已连续签到 <text
											style="font-size: x-large;">{{opera}}</text> 天</view>
									<view @click="doDailyChange"
										style="background-color: #FFD025;color: #8F4D00;font-size: x-large;font-weight: bold;padding: 10px 40px;border-radius: 30px;">
										立即签到 </view>
								</view>
							</view>
							<view
								style="display: flex;justify-content: space-between;align-items: center;padding: 20px 0;">
								<view style="color: #FFF3C8;">不想漏签，开启消息提醒订阅 </view>
								<tn-switch v-model="indent" shape="square" active-text="ON" inactive-text="OFF"
									@change="switchChange"></tn-switch>
								<!-- active-color="#F14A1F" inactive-color="#aaaaaa" -->
							</view>
							<!-- 滚动栏 -->
							<scroll-view class="dailySlBlock" :scroll-top="0" scroll-y>
								<view style="display: flex;flex-direction: column;" :style="'height:'+topH+'px;'">
									<view v-for="(item,index) in dailyData" :key="index"
										style="display: flex;justify-content: space-between;padding: 5px;border-bottom: #aaa solid 1px;width: 100%;">
										<view style="color: #FFF3C8;">{{item.today}}</view>
										<view style="color: #FFF3C8;">{{item.name}}</view>
										<view style="color: #FFF3C8;">{{item.flag}}</view>
										<view style="color: #4cd964;">+{{item.point + item.reward}}</view>
									</view>
								</view>
							</scroll-view>
							<!-- 悬浮窗 -->
							<view
								style="width: 100%;height: 40px;position: absolute; top:-20px; left: 0;display: flex;justify-content: center;">
								<view
									style="width: 80%;height: 100%;background-color: #F14A1F88;display: flex;flex-direction: column; justify-content: center; align-items: center;border-radius: 20px; ">
									<text style="color: #FFF3C8;">下次连续签到可以获得 {{tipText}} 积分</text>
								</view>
							</view>
							<!-- 悬浮窗 -->
							<view
								style="padding: 20px; width: 100%;position: absolute; top: 20px; left: 0; display: flex;justify-content: space-around;align-items: start;">
								<view class="hand-shank"></view>
								<view class="hand-shank"></view>
							</view>
						</view>
						<!-- 顶部自定义导航 -->
						<tn-navbar :placeholder="true" fixed bg-color="#FFFFFF00" text-color="#fff"> {{title}}
						</tn-navbar>
					</view>

				</scroll-view>
			</view>
		</view>
	</view>

</template>

<script>
	import utils from '@/common/utils';
	export default {
		data() {
			return {
				toTop: 0, // 页眉高度
				topH: 0,
				title: '每日签到',
				sConf: getApp().globalData,
				minDate: "2000-01-01",
				opera: 0,
				indent: false,
				tipText: 0,
				curData: null,
				dailyData: []
			}
		},
		onLoad() {
			console.log('onLoad');
			const today = new Date();
			const firstDay = new Date(today.setDate(1))
			const startDay = firstDay.toISOString().split('T')[0]
			this.minDate = startDay

			// 提前请求数据加载
			this.loadDailyList()
			this.loadSubscribeList()
		},
		onReady() {
			console.log('onReady');
			// this.loadDefData()
			// setTimeout(() => {
			// 	this.designLayout();
			// }, 2000);
			this.designLayout();
		},
		methods: {
			calendarChange(e) {
				console.log('选择日期', e);
			},
			loadDefData() {
				console.log('初始化');
			},
			designLayout() {
				console.log('计算窗口布局');
				// 计算窗口高度
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.dailyHeadBatten').boundingClientRect();
					query.select('.dailySlBlock').boundingClientRect();
					query.exec((res) => {
						console.log('cart窗口', this.sConf.iH, res[0].top, res[1].top);
						this.topH = this.sConf.iH - res[1].top - this.sConf.tH + 10;
					});
				})
			},
			/**
			 * 立即签到
			 */
			doDailyChange() {
				console.log('doDailyChange');
				const today = new Date();
				const startDay = today.toISOString().split('T')[0]
				if (this.curData.includes(startDay)) {
					// #ifdef MP-WEIXIN
					wx.vibrateShort();
					// #endif
					uni.showToast({
						icon: 'error',
						title: '今日已签到'
					})
					return
				} else {
					let host = this.sConf.host + '/weapps/dailyPost/'
					let token = this.sConf.token
					let data = null
					utils.authenticatorPost(host, token, data).then((res) => {
						console.log('立即签到', res);
						if (res.rescode === 200) {
							uni.reLaunch({
								url: '/pageb/daily/daily'
							})
						}
					});
				}
			},
			/**
			 * 订阅开关
			 * @param {Object} e
			 */
			switchChange(e) {
				console.log('订阅开关', e);
				let that = this
				let title = e ? '订阅' : '取消订阅'
				let status = e ? 1 : 0
				uni.showModal({
					title: title + '模板消息',
					content: '是否要' + title + '提醒签到',
					success(r) {
						if (r.confirm) {
							let host = that.sConf.host + '/weapps/Plates/'
							let token = that.sConf.token
							let data = {
								sid: that.sConf.auth.id,
								name: '提醒签到',
								status: status
							}
							utils.authenticatorPost(host, token, data).then((res) => {
								console.log('订阅模板消息', res);
								if (res.rescode !== 200) {
									that.indent = !e
								}
							})
						} else if (r.cancel) {
							that.indent = !e
						}
					}
				});
			},
			/**
			 * 加载签到列表
			 */
			loadDailyList() {
				let host = this.sConf.host + '/weapps/dailyList/'
				let token = this.sConf.token
				let data = {
					sid: this.sConf.auth.id,
					ordering: '-id'
				}
				utils.authenticatorList(host, token, data).then((res) => {
					console.log('加载签到列表', res);
					if (res.rescode === 200) {
						this.dailyData = res.resmsg;
						let tmpData = new Array()
						res.resmsg.forEach(item => {
							tmpData.push(item.today)
						})
						this.curData = tmpData;
						let lastDaily = res.resmsg[0];
						this.opera = lastDaily?.flag || 0

						let maxDay = (this.opera + 1) > res.rule.radix_max ? res.rule.radix_max : (this
							.opera + 1)
						this.tipText = parseInt(res.rule.price) + res.rule.radix * maxDay
					}
				});
			},
			/**
			 * 加载订阅
			 */
			loadSubscribeList() {
				console.log('加载订阅');
				let host = this.sConf.host + '/weapps/Plates/'
				let token = this.sConf.token
				let data = {
					sid: this.sConf.auth.id,
					name: '提醒签到'
				}
				utils.authenticatorList(host, token, data).then((res) => {
					console.log('加载订阅', res);
					if (res.rescode === 200) {
						if (res.resmsg.length > 0) {
							this.indent = res.resmsg[0].status ? true : false
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* start 全屏适配 */
	.window-top {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.window-flex {
		flex: 1;
		overflow: hidden;
	}

	.window-box {
		height: 100%;
		overflow: hidden;
	}

	.window-scroll {
		height: 100%;
		overflow: hidden;
	}

	/* end 全屏适配 */

	/* 装订环 */
	.hand-shank {
		width: 15px;
		height: 65px;
		background-color: #FFD025;
		border: 2px solid #8F4D00;
		border-radius: 6px;
		box-shadow: 5px 5px 5px 1px rgba(0, 0, 0, 0.3);
	}
</style>